<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=375, initial-scale=1.0">
    <title>我的 - 三角洲行动代练</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body { background: #f6f8fa; }
        .phone-frame { width: 375px; height: 812px; background: #000; border-radius: 40px; padding: 12px; box-shadow: 0 2px 24px rgba(0,0,0,0.06); position: relative; overflow: hidden; margin: 32px auto; }
        .phone-screen { width: 100%; height: 100%; background: #fff; border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
        .content-area { flex: 1; overflow-y: auto; padding-bottom: 80px; }
        .avatar { width: 80px; height: 80px; border-radius: 50%; border: 2.5px solid #2563eb; object-fit: cover; margin: 0 auto; }
        .edit-btn { color: #2563eb; background: none; border: none; font-size: 1rem; margin-left: 0.5rem; cursor: pointer; padding: 0; }
        .edit-btn:focus { outline: none; }
        .copy-btn { color: #2563eb; margin-left: 0.5rem; cursor: pointer; font-size: 1rem; background: none; border: none; padding: 0; }
        .copy-btn.copied { color: #22c55e; }
        .stat-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; border-radius: 18px; background: #fff; margin: 16px 0 24px 0; border: 1px solid #f1f5f9; overflow: hidden; }
        .stat-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 0; }
        .stat-num { color: #2563eb; font-size: 22px; font-weight: bold; }
        .stat-label { color: #6b7280; font-size: 13px; margin-top: 2px; }
        .stat-grid .stat-cell { border-right: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; }
        .stat-grid .stat-cell:nth-child(2n) { border-right: none; }
        .stat-grid .stat-cell:nth-child(n+3) { border-bottom: none; }
        .main-btn { width: 100%; max-width: 320px; margin: 0 auto; background: #2563eb; color: #fff; border: none; border-radius: 9999px; font-size: 16px; font-weight: 500; padding: 14px 0; margin-top: 12px; margin-bottom: 8px; transition: background 0.2s; }
        .main-btn:hover { background: #1d4ed8; }
        .main-tip { color: #94a3b8; font-size: 13px; text-align: center; margin-bottom: 18px; }
        .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid #f1f5f9; }
        .bottom-nav a { flex: 1; text-align: center; color: #94a3b8; font-size: 13px; padding: 8px 0 4px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
        .bottom-nav a.active { color: #2563eb; font-weight: bold; }
        .toast-tip { display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.85);color:#fff;padding:10px 24px;border-radius:20px;font-size:15px;z-index:9999;pointer-events:none; }
    </style>
</head>
<body>
    <div class="phone-frame">
        <div class="phone-screen">
            <!-- 状态栏 -->
            <div class="flex items-center justify-between h-7 px-4 bg-white select-none">
                <span class="text-xs font-medium text-black tracking-widest">10:50</span>
                <div class="flex items-center space-x-1">
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.5 3.5L4 6m13.5-2.5L20 6M12 8v4l3 3m-3 7a8 8 0 100-16 8 8 0 000 16z"/></svg>
                    <span class="text-[10px] font-bold text-black">5.00</span>
                    <span class="text-[10px] text-black">KB/S</span>
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.05 7.05A16 16 0 0112 3c2.5 0 4.89.58 7.05 1.64M5.07 10.07A11 11 0 0112 7c2.21 0 4.3.6 6.07 1.64M8.11 13.11A6 6 0 0112 11a6 6 0 013.89 2.11M12 17h.01"/></svg>
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2 20h.01M7 16v4m5-8v12m5-16v16"/></svg>
                    <span class="text-xs font-bold text-black ml-0.5">5G</span>
                    <div class="flex items-center ml-1">
                        <div class="w-6 h-3 rounded-sm border border-black flex items-center relative">
                            <div class="bg-black h-2 rounded-l-sm" style="width:70%"></div>
                        </div>
                        <span class="text-xs font-bold text-black ml-1">78</span>
                    </div>
                </div>
            </div>
            <!-- 标题栏 -->
            <div class="flex items-center h-12 bg-white select-none border-b border-gray-100 px-4 relative">
                <div class="absolute left-0 right-0 flex justify-center items-center pointer-events-none">
                    <span class="text-base font-medium text-black tracking-wide leading-none">我的</span>
                </div>
                <div class="flex-shrink-0 flex items-center ml-auto" style="min-width:90px;">
                    <div class="flex items-center bg-white rounded-full border border-gray-200 px-3 py-1 shadow-sm" style="height:36px;">
                        <span class="text-black text-lg font-bold px-1">···</span>
                        <div class="w-px h-5 bg-gray-200 mx-2"></div>
                        <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center">
                            <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="6"/></svg>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 内容区可滚动 -->
            <div class="content-area">
                <!-- 个人信息区 -->
                <div class="flex flex-col items-center pt-2 pb-2 border-b border-gray-100 mx-6">
                    <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=用户&backgroundColor=b6e3f4" class="avatar mb-2" alt="头像">
                    <div class="flex items-center mb-1">
                        <span class="text-lg font-bold text-gray-900" id="userName">小明</span>
                        <button class="edit-btn" id="editInfoBtn" title="编辑信息" style="font-size:15px;padding:0 2px;line-height:1;"><i class="fas fa-pen-to-square"></i></button>
                    </div>
                    <div class="flex flex-col items-center gap-1 w-full">
                        <div class="flex items-center text-gray-500 text-sm">
                            <span class="mr-1">游戏段位：</span><span id="userRank" class="font-medium">黄金 Ⅲ</span>
                        </div>
                        <div class="flex items-center text-gray-500 text-sm">
                            <span class="mr-1">联系电话：</span><span id="userPhone" class="font-medium">13812348888</span>
                        </div>
                    </div>
                </div>
                <!-- 极简聚焦积分信息区 -->
                <div class="mx-6 mt-4 flex flex-col items-center">
                    <div class="flex items-center justify-center mb-3" style="gap:10px;">
                        <i class="fas fa-coins text-yellow-400" style="font-size:32px;"></i>
                        <span class="text-4xl font-extrabold text-blue-700" id="userPoints">36</span>
                        <button id="pointInfoBtn" class="ml-1 text-blue-300 hover:text-blue-500" style="background:none;border:none;cursor:pointer;font-size:20px;" title="积分说明"><i class="fas fa-circle-question"></i></button>
                    </div>
                    <div class="flex items-center justify-center mb-2" style="gap:6px;">
                        <span style="font-size:14px;color:#94a3b8;font-weight:400;">我的邀请码:</span>
                        <span style="font-size:15px;color:#94a3b8;font-weight:400;letter-spacing:1px;" id="inviteCode">ABCD1234</span>
                        <button class="copy-btn ml-1" id="copyInviteBtn" title="复制邀请码" style="color:#a1a1aa;font-size:15px;background:none;border:none;padding:0;cursor:pointer;" onmouseover="this.style.color='#2563eb'" onmouseout="this.style.color='#a1a1aa'"><i class="fas fa-copy"></i></button>
                    </div>
                    <button class="flex items-center gap-2 px-5 py-2 mt-4 text-base text-blue-600 font-semibold bg-blue-50 border border-blue-100 rounded-full hover:bg-blue-100 transition" id="fillInviteBtn" style="margin:0 auto;display:block;box-shadow:none;">
                        <i class="fas fa-gift"></i>填写邀请码，领取10积分
                    </button>
                </div>
                <!-- 统计数据区 -->
                <div class="stat-grid mx-6">
                    <div class="stat-cell">
                        <span class="stat-num" id="publishCount">12</span>
                        <span class="stat-label">发单量</span>
                    </div>
                    <div class="stat-cell">
                        <span class="stat-num" id="receiveCount">8</span>
                        <span class="stat-label">接单量</span>
                    </div>
                    <div class="stat-cell">
                        <span class="stat-num text-red-500" id="totalPay">¥1200.00</span>
                        <span class="stat-label">总支出</span>
                    </div>
                    <div class="stat-cell">
                        <span class="stat-num text-green-500" id="totalIncome">¥800.00</span>
                        <span class="stat-label">总收入</span>
                    </div>
                </div>
                <!-- 联系客服按钮（后置） -->
                <button class="main-btn flex items-center justify-center gap-2" id="contactBtn">
                    <i class="fas fa-headset"></i>联系客服
                </button>
                <div class="main-tip">如有疑问请联系客服</div>
            </div>
            <!-- 微信二维码弹窗 -->
            <div id="wechatModalMask" class="fixed inset-0 z-50 bg-black bg-opacity-40 flex items-center justify-center" style="display:none;">
                <div class="bg-white rounded-2xl shadow-xl px-2 py-4 w-60 max-w-[90vw] relative flex flex-col items-center">
                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=112x112&data=weixin://wxpay/bizpayurl?pr=xxxxxx" alt="客服微信二维码" class="w-28 h-28 rounded-lg border mb-2 mt-1">
                    <div class="text-base font-semibold text-gray-800 mb-2">长按二维码添加客服微信</div>
                    <button id="closeWechatModal" class="w-full mt-1 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-full text-base font-medium transition-colors">知道了</button>
                </div>
            </div>
            <!-- 底部导航栏 -->
            <div class="bottom-nav flex">
                <a href="#" class="">
                    <i class="fas fa-home text-xl"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="#" class="">
                    <i class="fas fa-list text-xl"></i>
                    <span class="text-xs mt-1">订单</span>
                </a>
                <a href="#" class="">
                    <i class="fas fa-comment text-xl"></i>
                    <span class="text-xs mt-1">消息</span>
                </a>
                <a href="#" class="active">
                    <i class="fas fa-user text-xl"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
            <!-- toast提示 -->
            <div class="toast-tip" id="toastTip">已复制</div>
            <!-- 编辑信息弹窗 -->
            <div id="editInfoModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40" style="display:none;">
                <div class="bg-white rounded-xl shadow-lg w-80 max-w-[90vw] p-6 flex flex-col items-center">
                    <div class="text-lg font-bold text-gray-900 mb-3">编辑信息</div>
                    <input id="editNameInput" type="text" maxlength="12" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-base focus:outline-none focus:border-blue-400 mb-3" value="小明" placeholder="昵称" />
                    <div class="w-full flex gap-2 mb-3">
                        <select id="editRankMain" class="flex-1 border border-gray-200 rounded-lg px-3 py-2 text-base focus:outline-none focus:border-blue-400">
                            <option value="青铜">青铜</option>
                            <option value="白银">白银</option>
                            <option value="黄金">黄金</option>
                            <option value="铂金">铂金</option>
                            <option value="钻石">钻石</option>
                            <option value="黑鹰">黑鹰</option>
                            <option value="三角洲巅峰">三角洲巅峰</option>
                        </select>
                        <select id="editRankSub" class="w-20 border border-gray-200 rounded-lg px-2 py-2 text-base focus:outline-none focus:border-blue-400">
                            <option value="Ⅰ">Ⅰ</option>
                            <option value="Ⅱ">Ⅱ</option>
                            <option value="Ⅲ">Ⅲ</option>
                            <option value="Ⅳ">Ⅳ</option>
                            <option value="Ⅴ">Ⅴ</option>
                        </select>
                    </div>
                    <input id="editPhoneInput" type="tel" maxlength="20" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-base focus:outline-none focus:border-blue-400 mb-4" value="13812348888" placeholder="联系电话" />
                    <div class="flex w-full gap-3 mt-2">
                        <button id="editInfoConfirm" class="flex-1 py-2 bg-blue-500 text-white rounded-full text-base font-medium hover:bg-blue-600 transition-colors">保存</button>
                        <button id="editInfoCancel" class="flex-1 py-2 bg-gray-200 text-gray-700 rounded-full text-base font-medium hover:bg-gray-300 transition-colors">取消</button>
                    </div>
                </div>
            </div>
            <!-- 填写邀请码弹窗 -->
            <div id="fillInviteModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40" style="display:none;">
                <div class="bg-white rounded-xl shadow-lg w-80 max-w-[90vw] p-6 flex flex-col items-center">
                    <div class="text-lg font-bold text-gray-900 mb-3">填写邀请码</div>
                    <input id="inviteInput" type="text" maxlength="16" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-base focus:outline-none focus:border-blue-400 mb-4" placeholder="请输入邀请码" />
                    <div class="flex w-full gap-3 mt-2">
                        <button id="inviteConfirm" class="flex-1 py-2 bg-blue-500 text-white rounded-full text-base font-medium hover:bg-blue-600 transition-colors">确认</button>
                        <button id="inviteCancel" class="flex-1 py-2 bg-gray-200 text-gray-700 rounded-full text-base font-medium hover:bg-gray-300 transition-colors">取消</button>
                    </div>
                    <div class="text-xs text-gray-400 mt-3">填写后可获得10积分（发布订单时可用）</div>
                </div>
            </div>
            <!-- 积分说明弹窗 -->
            <div id="pointInfoModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40" style="display:none;">
                <div class="bg-white rounded-xl shadow-lg w-80 max-w-[90vw] p-6 flex flex-col items-center">
                    <div class="text-lg font-bold text-gray-900 mb-3">积分说明</div>
                    <div class="text-gray-700 text-base mb-4 text-left w-full leading-relaxed">
                        <ul class="list-disc pl-5 space-y-2">
                            <li>填写邀请码可获得 <span class="text-blue-600 font-bold">10积分</span>。</li>
                            <li>每邀请一位新用户可获得 <span class="text-blue-600 font-bold">1积分</span>。</li>
                            <li>积分可用于发布代练订单时抵扣金额，<span class="text-blue-600 font-bold">1积分=1元</span>，单笔订单最多可抵扣订单金额的<span class="text-blue-600 font-bold">10%</span>。</li>
                        </ul>
                    </div>
                    <button id="closePointInfoModal" class="w-full mt-1 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-full text-base font-medium transition-colors">知道了</button>
                </div>
            </div>
        </div>
    </div>
    <script>
    // 编辑信息弹窗逻辑
    var editInfoBtn = document.getElementById('editInfoBtn');
    var editInfoModal = document.getElementById('editInfoModal');
    var editNameInput = document.getElementById('editNameInput');
    var editRankMain = document.getElementById('editRankMain');
    var editRankSub = document.getElementById('editRankSub');
    var editPhoneInput = document.getElementById('editPhoneInput');
    var editInfoConfirm = document.getElementById('editInfoConfirm');
    var editInfoCancel = document.getElementById('editInfoCancel');
    var userName = document.getElementById('userName');
    var userRank = document.getElementById('userRank');
    var userPhone = document.getElementById('userPhone');
    // 主流模式段位体系
    var rankSubMap = {
        '青铜': ['Ⅲ','Ⅱ','Ⅰ'],
        '白银': ['Ⅲ','Ⅱ','Ⅰ'],
        '黄金': ['Ⅳ','Ⅲ','Ⅱ','Ⅰ'],
        '铂金': ['Ⅳ','Ⅲ','Ⅱ','Ⅰ'],
        '钻石': ['Ⅴ','Ⅳ','Ⅲ','Ⅱ','Ⅰ'],
        '黑鹰': ['Ⅴ','Ⅳ','Ⅲ','Ⅱ','Ⅰ'],
        '三角洲巅峰': []
    };
    function setRankSelect(rankText) {
        var main = '黄金', sub = 'Ⅲ';
        if(rankText) {
            var match = rankText.match(/([\u4e00-\u9fa5]+)\s*([ⅠⅡⅢⅣⅤ]?)/);
            if(match) { main = match[1]; sub = match[2]||''; }
        }
        editRankMain.value = main;
        updateRankSubOptions(main, sub);
    }
    function updateRankSubOptions(main, selectedSub) {
        var subs = rankSubMap[main] || [];
        editRankSub.innerHTML = '';
        if(subs.length === 0) {
            editRankSub.style.display = 'none';
        } else {
            editRankSub.style.display = '';
            subs.forEach(function(sub) {
                var opt = document.createElement('option');
                opt.value = sub;
                opt.textContent = sub;
                if(sub === selectedSub) opt.selected = true;
                editRankSub.appendChild(opt);
            });
        }
    }
    editRankMain.onchange = function() {
        updateRankSubOptions(editRankMain.value, rankSubMap[editRankMain.value][0]||'');
    };
    editInfoBtn.onclick = function() {
        editInfoModal.style.display = 'flex';
        editNameInput.value = userName.innerText;
        setRankSelect(userRank.innerText);
        editPhoneInput.value = userPhone.innerText;
        setTimeout(()=>{editNameInput.focus();},100);
    };
    editInfoCancel.onclick = function() {
        editInfoModal.style.display = 'none';
    };
    editInfoConfirm.onclick = function() {
        var nameVal = editNameInput.value.trim();
        var mainVal = editRankMain.value;
        var subVal = editRankSub.style.display==='none' ? '' : editRankSub.value;
        var rankVal = mainVal + (subVal ? ' ' + subVal : '');
        var phoneVal = editPhoneInput.value.trim();
        if(nameVal) userName.innerText = nameVal;
        if(rankVal) userRank.innerText = rankVal;
        if(phoneVal) userPhone.innerText = phoneVal;
        editInfoModal.style.display = 'none';
    };
    // 联系客服按钮弹窗
    var wechatModalMask = document.getElementById('wechatModalMask');
    var contactBtn = document.getElementById('contactBtn');
    var closeWechatModal = document.getElementById('closeWechatModal');
    contactBtn.onclick = function() {
        wechatModalMask.style.display = 'flex';
    };
    closeWechatModal.onclick = function() {
        wechatModalMask.style.display = 'none';
    };
    wechatModalMask.onclick = function(e) {
        if(e.target === wechatModalMask) wechatModalMask.style.display = 'none';
    };
    // 邀请码复制逻辑
    var copyInviteBtn = document.getElementById('copyInviteBtn');
    var inviteCode = document.getElementById('inviteCode');
    copyInviteBtn.onclick = function() {
        var code = inviteCode.innerText;
        navigator.clipboard.writeText(code).then(function(){
            var toast = document.getElementById('toastTip');
            toast.innerText = '邀请码已复制';
            toast.style.display = 'block';
            setTimeout(function(){ toast.style.display = 'none'; }, 1200);
        });
    };
    // 填写邀请码按钮显示控制，根据后端返回的 hasFilledInvite 字段
    var hasFilledInvite = false; // TODO: 这里应由后端接口动态赋值
    var fillInviteBtn = document.getElementById('fillInviteBtn');
    if (hasFilledInvite && fillInviteBtn) {
        fillInviteBtn.style.display = 'none';
    }
    // 填写邀请码弹窗逻辑
    var fillInviteBtn = document.getElementById('fillInviteBtn');
    var fillInviteModal = document.getElementById('fillInviteModal');
    var inviteInput = document.getElementById('inviteInput');
    var inviteConfirm = document.getElementById('inviteConfirm');
    var inviteCancel = document.getElementById('inviteCancel');
    fillInviteBtn.onclick = function() {
        fillInviteModal.style.display = 'flex';
        inviteInput.value = '';
        setTimeout(()=>{inviteInput.focus();},100);
    };
    inviteCancel.onclick = function() {
        fillInviteModal.style.display = 'none';
    };
    inviteConfirm.onclick = function() {
        var val = inviteInput.value.trim();
        if(val) {
            fillInviteModal.style.display = 'none';
            var toast = document.getElementById('toastTip');
            toast.innerText = '填写成功，已获得10积分';
            toast.style.display = 'block';
            setTimeout(function(){ toast.style.display = 'none'; }, 1500);
            // TODO: 这里应调用后端接口
            // 填写成功后隐藏填写邀请码按钮（设计阶段UI效果）
            if(fillInviteBtn) fillInviteBtn.style.display = 'none';
        }
    };
    // 积分说明弹窗逻辑
    document.addEventListener('click', function(e) {
        // 判断是否点击了问号icon按钮
        if (e.target.closest('#pointInfoBtn')) {
            var pointInfoModal = document.getElementById('pointInfoModal');
            if (pointInfoModal) pointInfoModal.style.display = 'flex';
        }
        // 判断是否点击了关闭按钮
        if (e.target.closest('#closePointInfoModal')) {
            var pointInfoModal = document.getElementById('pointInfoModal');
            if (pointInfoModal) pointInfoModal.style.display = 'none';
        }
        // 点击弹窗遮罩关闭
        if (e.target.id === 'pointInfoModal') {
            e.target.style.display = 'none';
        }
    });
    </script>
</body>
</html> 